<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="../layui_ext/dtree/font/dtreefont.css">

</head>

<body>
    <div class="container">
        <div class="layui-row layui-col-space10">
            <div class="layui-fluid">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>在线示例</legend>
                    <div class="layui-field-box">
                        <div class="layui-row layui-col-space10" style="margin-top: 10px;">
                            <div class="layui-col-xs12">
                                <div id="toolbarDiv" style="overflow: auto">
                                    <ul id="demoTree" class="dtree" data-id="0"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        layui.extend({
            dtree: '{/}../layui_ext/dtree/dtree'
        }).use(['element', 'layer', 'table', 'code', 'util', 'dtree', 'form'], function () {
            var element = layui.element, layer = layui.layer, table = layui.table, util = layui.util, dtree = layui.dtree, form = layui.form, $ = layui.$;

            var data = [
                {
                    "id": "001", "title": "湖南省", "last": false, "parentId": "0",
                    "children": [
                        { "id": "001001", "title": "长沙市", "last": true, "parentId": "001" },
                        { "id": "001002", "title": "株洲市", "last": true, "parentId": "001" },
                        { "id": "001003", "title": "湘潭市", "last": true, "parentId": "001" },
                        { "id": "001004", "title": "衡阳市", "last": true, "parentId": "001" },
                        { "id": "001005", "title": "郴州市", "last": true, "parentId": "001" }]
                },
                {
                    "id": "002", "title": "湖北省", "last": false, "parentId": "0",
                    "children": [
                        { "id": "002001", "title": "武汉市", "last": true, "parentId": "002" },
                        { "id": "002002", "title": "黄冈市", "last": true, "parentId": "002" },
                        { "id": "002003", "title": "潜江市", "last": true, "parentId": "002" },
                        { "id": "002004", "title": "荆州市", "last": true, "parentId": "002" },
                        { "id": "002005", "title": "襄阳市", "last": true, "parentId": "002" }]
                },
                {
                    "id": "003", "title": "广东省", "last": false, "parentId": "0",
                    "children": [
                        {
                            "id": "003001", "title": "广州市", "last": false, "parentId": "003",
                            "children": [
                                { "id": "003001001", "title": "天河区", "last": true, "parentId": "003001" },
                                { "id": "003001002", "title": "花都区", "last": true, "parentId": "003001" }]
                        },
                        { "id": "003002", "title": "深圳市", "last": true, "parentId": "003" },
                        { "id": "003003", "title": "中山市", "last": true, "parentId": "003" },
                        { "id": "003004", "title": "东莞市", "last": true, "parentId": "003" },
                        { "id": "003005", "title": "珠海市", "last": true, "parentId": "003" },
                        { "id": "003006", "title": "韶关市", "last": true, "parentId": "003" }]
                },
                {
                    "id": "004", "title": "浙江省", "last": false, "parentId": "0",
                    "children": [
                        { "id": "004001", "title": "杭州市", "last": true, "parentId": "004" },
                        { "id": "004002", "title": "温州市", "last": true, "parentId": "004" },
                        { "id": "004003", "title": "绍兴市", "last": true, "parentId": "004" },
                        { "id": "004004", "title": "金华市", "last": true, "parentId": "004" },
                        { "id": "004005", "title": "义乌市", "last": true, "parentId": "004" }]
                },
                {
                    "id": "005", "title": "福建省", "last": false, "parentId": "0",
                    "children": [
                        { "id": "005001", "title": "厦门市", "last": true, "parentId": "005" }]
                }];

            var DTree = dtree.render({
                elem: "#demoTree",
                data: data,
                done: function (data, obj) {  // 异步加载完毕后回调，参数：1是本次加载的数据，2是组件的根节点的jQuery对象，可以打开控制台看看是什么参数哦
                    console.log(data);
                    console.log(obj);
                },
                //    url: "please input your url"
            });

            dtree.on("node(demoTree)", function (obj) {
                console.log("节点的数据", obj)
                //修改一下子节点数据

                layer.msg(JSON.stringify(obj.param));
            })
        });
    </script>
</body>

</html>